{% extends 'index.html' %}
{% load static %}
{% block grid %}
    <script src="{% static 'js/highcharts.js' %}"></script>
    <script src="{% static 'js/exporting.js' %}"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/wordcloud.js"></script>
    <script src="{% static 'js/oldie.js' %}"></script>
    {#    <script src="https://code.highcharts.com.cn/highcharts/modules/data.js"></script>#}
    <script src="https://code.highcharts.com.cn/highcharts/modules/drilldown.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/themes/grid-light.js"></script>
    <div class="ui two column grid" style="margin: 5px 15px 5px 5px;width:90%">
        <div class="row">
            <div class="column">
                <div class="ui container" id="bar1"></div>
            </div>
            <div class="column">
                <div class="ui bar2" id="bar2"></div>
            </div>
            <div class="column">
                <div class="ui container" id="pie1"></div>
            </div>
            <div class="column">
                <div class="ui container" id="bar3"></div>
            </div>
            <div class="column">
                <div class="ui container" id="wordcloud"></div>
            </div>

            <div class="column">
                <div class="ui container" id="bar4"></div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        Highcharts.chart('bar1', {
            chart: {
                type: 'column'
            },
            title: {
                text: '计算机后端开发招聘职能数量分布'
            },
            subtitle: {
                text: '数据截止 {{ last_time }}，来源: <a href="https://www.51job.com/">51job</a>'
            },
            credits: {
                text: 'MCS',
                href: 'https://github.com/machangshun'
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: '数量'
                }
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                    },
                    showInLegend: true
                },
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    {#3d#}
                    depth: 35,
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    },
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b>'
            },
            series: [{
                name: 'job',
                colorByPoint: true,
                data: {{ position_num|safe }}
            }],
            drilldown: {
                series:{{ key_city|safe }}
            }
        });
        Highcharts.chart('bar2', {
            chart: {
		type: 'column'
	},
	title: {
		text: '工作学历要求'
	},
	xAxis: {
		categories: ['软件工程师','Java开发工程师','Hadoop工程师','系统架构设计师','大数据开发工程师','Go开发工程师','C/C++开发工程师','ERP技术开发','.NET开发工程师','PHP开发工程师','多媒体开发工程师','爬虫开发工程师','Ruby开发工程师','Python开发工程师','系统分析员','技术文档工程师','脚本开发工程师','区块链开发']
	},
	yAxis: {
		min: 0,
        max:null,
		title: {
			text: '百分比%'
		}
	},
	tooltip: {
		pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>' +
		'({point.percentage:.0f}%)<br/>',
		shared: true
	},
	plotOptions: {
		column: {
			stacking: 'percent'
		}
	},
	series:[{'name': '博士', 'data': [21, 0, 27, 48, 12, 10, 0, 0, 0, 0, 5, 0, 1, 0, 1, 0, 0, 0]}, {'name': '硕士', 'data': [367, 61, 289, 167, 169, 57, 73, 5, 10, 1, 54, 19, 5, 20, 20, 12, 1, 10]}, {'name': '本科', 'data': [10000, 5691, 4899, 3137, 2733, 2119, 1850, 1146, 761, 490, 506, 630, 620, 628, 509, 280, 96, 96]}, {'name': '大专', 'data': [4604, 1994, 1009, 626, 827, 593, 539, 1020, 648, 546, 322, 266, 280, 199, 215, 230, 96, 27]}]
        });
        Highcharts.chart('pie1', {
            chart: {
                type: 'pie'
            },
            title: {
                text: '计算机后端开发招聘职位占比'
            },
            subtitle: {
                text: '数据截止 {{ last_time}}，来源: <a href="https://www.51job.com/">51job</a>'
            },
            credits: {
                text: 'MCS',
                href: 'https://github.com/machangshun'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    },
                    showInLegend: true
                }
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                min: 500,
                title: {
                    text: '数量'
                }
            },
            legend: {
                enabled: true
            },
            series: [{
                name: '职位',
                data:{{ position_num | safe }}
            }],
            drilldown: {
                series:{{ key_exp | safe }}
            }
        });
        Highcharts.chart('bar3', {
            chart: {
                type: 'column'
            },
            title: {
                text: '计算机后端开发招聘职位工资情况'
            },
            subtitle: {
                text: '数据截止 {{ last_time }}，来源: <a href="https://www.51job.com/">51job</a>'
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: '平均工资'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.1f}'
                    }
                }
            },
            tooltip: {
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
            },
            series:{{ salary_avg|safe }},
            drilldown: {
                series: {{ key_salary|safe }}
            }
        });
        Highcharts.chart('wordcloud', {
            series: [{
                type: 'wordcloud',
                data: {{ key_data|safe }}
            }],
            title: {
                text: '词频分析'
            }
        });
        Highcharts.chart('bar4', {
            chart: {
                type: 'column'
            },
            title: {
                text: '计算机后端开发招聘职位区域分布'
            },
            subtitle: {
                text: '数据截止 {{ last_time }}，来源: <a href="https://www.51job.com/">51job</a>'
            },
            credits: {
                text: 'MCS',
                href: 'https://github.com/machangshun'
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: '数量'
                }
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                    },
                    showInLegend: true
                },
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    {#3d#}
                    depth: 35,
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    },
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b>'
            },
            series: [{
                name: 'city',
                colorByPoint: true,
                data: {{ bar_data|safe }}
            }],
            drilldown: {
                {#pie_data#}
                series: {{ pie_data|safe }}
            }
        });
    </script>
{% endblock %}